<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/fastclick.js"></script>
    <style>
        #header {
            background: #fbdb0a;
            color: #000;
            border-bottom: #b2b2b2 solid 1px;
        }
    </style>
</head>

<body style="background:#fff">
    <div v-cloak id="register_two" class="register_two">

        <section class="register_one register_pub" v-show="state == 0">
            <div class="register_one_title">
                <h1>注册</h1>
                <p>欢迎使用<span id="appname"></span></p>
            </div>
            <div class="register_one_input">
                <span class="phone_left">+86</span>
                <input class="" type="number" maxlength="11" v-model="input" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)">
                <span class="phone_right" @click="clearPhone"></span>
            </div>
            <div class="register_one_next">
                <button class="nextStep" @click="nextStep">下一步</button>
            </div>
        </section>

        <section class="register_one register_pub" v-show="state !== 0">
            <div class="register_one_title">
                <h1>注册</h1>
                <p>请输入{{input}}收到的验证码</p>
            </div>
            <div class="register_two_input">
                <input class="" type="number" maxlength="11" v-model="code" placeholder="验证码">
            </div>
            <div class="register_one_next">
                <span class="getCode" @click="getCode" v-show="codeState">获取验证码</span>
                <span class="times" v-show="!codeState">时间剩余{{time}}s</span>
                <button class="nextStep" @click="login">登录</button>
            </div>
        </section>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../script/jquery.min.js"></script>
<script type="text/javascript">
    apiready = function() {
      FastClick.attach(document.body);
      var appName = api.appName;
      var appname = $api.byId('appname');
      appname.innerHTML = appName;
      var vm = new Vue({
          el: '#register_two',
          data: {
              state: 0,
              input: '',
              code: '',
              codeState: true,
              time: 120
          },
          methods: {
              nextStep: function() {
                  if (this.input.length == 11) {
                      this.state = 1
                  } else {
                      alert('手机号码不正确')
                  }
              },
              clearPhone: function() {
                this.input = ''
              },
              getCode: function() {
                  var that = this;
                  that.codeState = false;
                  let timer = setInterval(() => {
                      that.time--;
                      if (that.time === 0) {
                          clearInterval(timer);
                          that.codeState = true;
                          that.time = 120;
                      }
                  }, 1000);

                  $.ajax({
                  		 type: "get",
                       url: "http://res.txingdai.com/account/code",
                  		 dataType: 'json',
                  			async:false,
                  			data:{
                        boundleId: 'com.yuanguinfo.xiaotang',
                        channel: 'appStore',
                        phone: that.input,
                        develop: false
                      },
                  		success: function(data){
                  		},
                      fail: function(data){
                      }
                  });
              },
              login: function() {
                var that = this
                $.ajax({
                     type: "get",
                     url: "http://res.txingdai.com/account/login",
                     dataType: 'json',
                    async:false,
                    data:{
                      boundleId: 'com.yuanguinfo.xiaotang',
                      channel: 'appStore',
                      phone: that.input,
                      code: that.code
                    },
                    success: function(data){
                      $api.setStorage('phone', that.input)
                      $api.isDownload(api.pageParam.item, api.pageParam.key)
                      // api.alert({
                      //     title: "提示",
                      //     msg: '登录成功',
                      //     buttons: ['确定']
                      // }, function(ret, err) {
                      // });
                    }
                });
              }
          },
          created: function() {},
          mounted: function() {}
      })
    };

</script>

</html>
